import React, { Component } from 'react'
import { connect } from 'react-redux'
import BindPlatformModal from './modal/BindPlatformModal'
import {
    getWarehouseExpressPlatformList,
    editWarehouseExpressPlatform,
    deleteWarehouseExpressPlatform
} from '@sagas/warehouse/warehouseManagement'
import { Popconfirm } from "antd";
import {
    getInventoryCommonExpressPlatform
} from '@sagas/warehouse/send'

const BIND_STATUS = {
    0: '申请中',
    1: '已配置',
    2: '已解绑',
    3: '已拒绝',
}

@connect(state => ({
    warehouseExpressPlatform: state.warehouseManagement.warehouseExpressPlatform,
}), {
    editWarehouseExpressPlatform,
    getWarehouseExpressPlatformList,
    deleteWarehouseExpressPlatform,
    getInventoryCommonExpressPlatform
})
class Platform extends Component {

    constructor(props) {
        super(props)
        this.state = {
            commonExpressPlatform:[]
        }
        this.bindPlatformModalRef = React.createRef()
        this.getSelection = this.getSelection.bind(this)
        this.callBack = this.callBack.bind(this)
        this.goModify = this.goModify.bind(this)
        this.getWarehouseExpress = this.getWarehouseExpress.bind(this)
    }

    componentDidMount() {
        this.getSelection()
    }

    getSelection() {
        this.props.getInventoryCommonExpressPlatform({
            deliverType: 1
        }, (res) => {
            this.setState({
                commonExpressPlatform: res
            })
            this.getWarehouseExpress()
        })
    }

    goModify(e) {
        const { id } = e.currentTarget.dataset
        this.bindPlatformModalRef.current?.show({
            id
        })
    }

    getWarehouseExpress() {
        const { id } = this.props
        this.props.getWarehouseExpressPlatformList({
            id: id
        })
    }

    callBack(platformId, info) {
        const { id } = this.props
        const { editWarehouseExpressPlatform } = this.props
        editWarehouseExpressPlatform({
            id: Number(id),
            platformId: parseInt(platformId),
            info,
        }, () => {
            this.getSelection()
        })
    }

    deleteWarehouseExpressPlatform(platform) {
        const { id } = this.props
        this.props.deleteWarehouseExpressPlatform({
            id: Number(id),
            platformId: platform
        }, () => {
            this.getSelection()
        })
    }

    getTableParams = () => {
        const { warehouseExpressPlatform } = this.props
        const { commonExpressPlatform } = this.state
        const tableData = (commonExpressPlatform || []).map((warehouse, index) => ({
            ...warehouse,
            key: `warehouse_${index}`,
        }))
        tableData.map(table => {
            warehouseExpressPlatform.map(item => {
                if (table.id === item.id) {
                    table.info = item.info
                    table.status = item.status
                    table.config_type = item.config_type
                }
            })
        })
        return {
            tableData
        }
    }

    render() {
        const { tableData } = this.getTableParams()
        return (
            <div>
                <div className='mgt-16 ft-14 ft-clr-d'>配送方</div>
                {(tableData || []).map(item => {
                    return (<div key={item.key} className='mgt-12 flex-row-between customer-table-line'>
                        <div>
                            <span className="ft-16 ft-clr-d">{item.name}</span>
                            { item.status ? <span className={"ft-12 ft-clr-ml mgl-12 status status-"+`${item.status}`}>{BIND_STATUS[item.status]}</span> : null}
                            <span className="ft-14 ft-clr-ml mgl-48">{item.info}</span>
                        </div>
                        {item.status === 1 ?
                            <Popconfirm
                                title="是否确认解绑"
                                onConfirm={() => this.deleteWarehouseExpressPlatform(item.id)}
                            >
                                <div className="mgr-8 ft-hover">解绑</div>
                            </Popconfirm> :
                            <div data-id={item.id} onClick={this.goModify} className="mgr-8 ft-hover">绑定</div>}

                    </div>)
                })}
                <BindPlatformModal callBack={this.callBack} ref={this.bindPlatformModalRef} />
            </div>
        );
    }
}

export default Platform